<template>
	<view class="expansion-red-envelope">
		<uv-popup ref="expansionRedEnvelopePopup" bgColor="none" overlayOpacity="0.8" z-index="2147483646"
			:closeOnClickOverlay="false" @maskClick="maskClick" @change="expansionRedEnvelopePopupchange">
			<view class="red-envelope-step1" v-if="step == 1">
				<view class="title">恭喜您已成功购买礼包</view>
				<view class="title1">以下权益已送达您的账户</view>
				<view class="bgc-g">
					<view class="bgc-guang"></view>
					<view class="advertising">
						<view class="advertising-1"></view>
						<view class="advertising-2"></view>
					</view>
				</view>
				<view class="free-purchase-pop-close" @tap.stop.prevent="closePop">
					<text class="dy-iconfont icon-a-bianzu69"></text>
				</view>
			</view>
			<view class="red-envelope-step2" :class="{'red-envelope-step2-t':step == 3 || step == 4}"
				v-if="step == 2 || step == 3 || step == 4" @tap.stop.prevent="maskClick()">
				<view class="title" v-if="step == 2">膨胀红包</view>
				<view class="title" v-else-if="step == 3">拼手气，爆红包</view>
				<view class="title" v-else-if="step == 4">哇塞，成功爆涨</view>
				<view class="title1" v-if="step == 2">分享小程序给3个好友并邀请对方注册成功后，</view>
				<view class="title1" v-if="step == 2 || step == 3">最高可爆涨至<text style="font-size: 32rpx;">30</text>元
				</view>
				<view class="title1" v-else-if="step == 4">快去下单吧</view>
				<view class="invite-view" :class="{'invite-list-animation1':step == 3}" v-if="step != 4">
					<view class="bgc-g">
						<view class="bgc-guang"></view>
						<view class="coupon-30">
							<view class="money"><text style="font-size: 32rpx;">¥</text><text>30</text></view>
							<view style="color: #FF4E04;font-size: 20rpx;">无门槛优惠券</view>
						</view>
						<image class="envelope"
							src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/envelope.png">
						</image>
					</view>
					<view class="invite-list">
						<view class="list">
							<view class="invite-item" v-for="(item,index) in viewInviteList" :key="index">
								<view class="invite-item-no" v-if="!item">
									<view class="text">待邀请</view>
								</view>
								<view v-else class="invite-item-yes">
									<image class="inflation-user-avatar" :src="item.inflationUserAvatar"
										mode="aspectFill"></image>
									<view class="text onelist-hidden">{{item.inflationUserName}}</view>
								</view>
							</view>
						</view>
						<button class="invite-btn" type="default" @tap.stop.prevent="share" open-type="share"
							v-if="inviteList.length < 3"></button>
						<view class="invite-btn-4" v-else @tap.stop.prevent="upgrade"></view>
					</view>
				</view>
				<view class="coupon-10" :class="{'coupon-10-np':step == 3,'coupon-10-np4':step == 4}">
					<view class="money"><text style="font-size: 32rpx;">¥</text><text>10</text></view>
					<view class="yhq" style="color: #FF4E04;">无门槛优惠券</view>
				</view>
				<view class="coupon-10 coupon-10-np3" :class="{'coupon-10-ani':step == 4}">
					<view class="money"><text style="font-size: 32rpx;">¥</text><text>15</text></view>
					<view class="yhq" style="color: #FF4E04;">无门槛优惠券</view>
				</view>
				<view class="invite-btn-9" v-if="animation1"></view>
				<view class="invite-btn-6" :class="{'invite-btn-6-an':step == 3}">
					<text style="--i:1">.</text>
					<text style="--i:2">.</text>
					<text style="--i:3">.</text>
					<text style="--i:4">爆</text>
					<text style="--i:5">涨</text>
					<text style="--i:6">中</text>
				</view>
				<view class="invite-btn-7" v-if="step == 4" @tap.stop.prevent="goContinue">去使用</view>
				<view v-if="step != 3" class="free-purchase-pop-close" :class="{'free-purchase-pop-close-7':step == 4}"
					@tap.stop.prevent="closePop">
					<text class="dy-iconfont icon-a-bianzu69"></text>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	const app = getApp();
	export default {
		options: {
			styleIsolation: 'shared',
		},
		components: {},
		data() {
			return {
				step: 1,
				viewInviteList: [],
				animation1: false,
			};
		},
		props: {
			inviteList: {
				type: Array,
				default: []
			},
			defaultStep: {
				type: [Number, String],
				default: 1
			},
			show: {
				type: Boolean,
				default: false
			},
			userCouponId: {
				type: [Number, String],
				default: null
			}
		},
		watch: {
			defaultStep: {
				handler: function(newVal) {
					this.$nextTick(() => {
						if (newVal == 10) {
							this.closePop()
						} else {
							this.setData({
								step: newVal,
							});
						}
					})
				},
				immediate: true,
				deep: true,
			},
			show: {
				handler: function(newVal) {
					this.$nextTick(() => {
						if (newVal) {
							this.openPop()
						} else {
							this.closePop()
						}
					})
				},
				immediate: true,
				deep: true,
			},
		},
		created() {
			if (this.inviteList.length > 0) {
				this.$nextTick(() => {
					this.inviteList.forEach(item => {
						this.viewInviteList.push(item)
					})
					this.viewInviteList.length = 3
				})
			}
		},
		methods: {
			goLogin() {
				app.doLogin()
			},
			maskClick() {
				if (this.step == 1) {
					this.step = 2
				} else {
					this.closePop()
				}
			},
			expansionRedEnvelopePopupchange(e) {
				if (!e.show) {
					setTimeout(() => {
						this.step = 2
					}, 500)
					this.$emit('expansionRedEnvelopePopupchange')
				}
			},
			share() {},
			upgrade() {
				this.step = 3
				this.animation1 = true
				setTimeout(() => {
					this.userCoppon()
				}, 2000)
			},
			userCoppon() {
				let that = this
				throttle(app._post_form(
					"/client/coupon/inflation/user-coupon", that.userCouponId,
					(result) => {
						this.animation1 = false
						this.step = 4
					}, (fail) => {
						app.showError(fail.data.msg || "系统繁忙");
						this.closePop()
					}, null, (fail) => {
						app.showError(fail.data.msg || "系统繁忙");
						this.closePop()
					}
				), 1000, true)
			},
			openPop() {
				this.$refs.expansionRedEnvelopePopup.open();
			},
			closePop() {
				this.$refs.expansionRedEnvelopePopup.close();
			},
			goContinue() {
				app.navigationTo('pages/community/index');
			}
		},
	};
</script>
<style lang="scss" scoped>
	/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
	@font-face {
		font-family: "阿里妈妈数黑体 Bold";
		font-weight: 700;
		src: url("//at.alicdn.com/wf/webfont/SgHC0jUG4tj7/ZEFwfSy3i4WD.woff2") format("woff2"),
			url("//at.alicdn.com/wf/webfont/SgHC0jUG4tj7/J7pWWaFIPMfT.woff") format("woff");
		font-display: swap;
	}

	.expansion-red-envelope {

		.red-envelope-step1 {
			.free-purchase-pop-close {
				width: 64rpx;
				height: 64rpx;
				border: 1rpx solid #FFFFFF;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				margin: 0 auto;
				color: #F6F8F7;
			}
		}

		.red-envelope-step1,
		.red-envelope-step2 {
			.title {
				font-family: "阿里妈妈数黑体 Bold";
				font-size: 48rpx;
				color: #FFFFFF;
				line-height: 57rpx;
				text-align: center;
				margin-bottom: 24rpx;
			}

			.title1 {
				font-weight: 600;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 37rpx;
				text-align: center;
			}

			.bgc-g {
				position: relative;
				width: 100vw;
				height: 600rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.bgc-guang {
					width: 600rpx;
					height: 600rpx;
					background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/animation-1.png');
					background-repeat: no-repeat;
					background-size: cover;
				}

				.advertising {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
				}

				.advertising-1 {
					width: 609rpx;
					height: 180rpx;
					border-radius: 40rpx;
					background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/free-pop-1.png');
					background-repeat: no-repeat;
					background-size: cover;
					box-sizing: border-box;
					margin-bottom: 16rpx;
				}

				.advertising-2 {
					width: 609rpx;
					height: 180rpx;
					border-radius: 40rpx;
					background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/free-pop-2.png');
					background-repeat: no-repeat;
					background-size: cover;
				}
			}
		}

		.red-envelope-step2 {
			position: relative;
			height: 100vh;
			width: 100vw;
			box-sizing: border-box;
			padding-top: 291rpx;
			transition: all 1s;

			.free-purchase-pop-close {
				width: 64rpx;
				height: 64rpx;
				border: 1rpx solid #FFFFFF;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				margin: 64rpx auto 0;
				color: #F6F8F7;
			}

			.free-purchase-pop-close-7 {
				position: absolute;
				left: 50%;
				margin-left: -32rpx;
				top: 1120rpx;
			}

			&.red-envelope-step2-t {
				padding-top: 378rpx;

				.title {
					font-size: 66rpx;
				}
			}

			.title1 {
				line-height: 40rpx;
			}

			.invite-view {
				padding: 0 45rpx 0;
				box-sizing: border-box;
				width: 100vw;
				position: relative;
				margin-top: -30rpx;
				// opacity: 0;
				// transform: scale(0);
				// display: none;

				&.invite-list-animation1 {
					animation: scale-up-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
				}

				.bgc-g {
					position: relative;
					margin-left: auto;
					right: 16rpx;
					width: 320rpx;
					height: 320rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.bgc-guang {
						width: 320rpx;
						height: 320rpx;
						background: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/animation-1.png');
						background-repeat: no-repeat;
						background-size: cover;
					}

					.coupon-30 {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						width: 198rpx;
						height: 234rpx;
						background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/hb.png');
						background-repeat: no-repeat;
						background-size: cover;
						padding: 36rpx 0 32rpx;
						box-sizing: border-box;
						text-align: center;

						.money {
							font-weight: 900;
							font-size: 58rpx;
							color: #671207;
							margin-bottom: 57rpx;
						}
					}

					.envelope {
						position: absolute;
						left: -40rpx;
						width: 85rpx;
						height: 101rpx;
					}
				}

				.invite-list {
					width: 660rpx;
					height: 406rpx;
					border-radius: 40rpx;
					background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/invite-bg.png');
					background-repeat: no-repeat;
					background-size: cover;
					padding: 46rpx 50rpx 0 50rpx;
					box-sizing: border-box;

					.list {
						display: flex;
						justify-content: space-between;
						margin-bottom: 94rpx;

						.invite-item {
							.invite-item-no {
								width: 130rpx;
								height: 130rpx;
								border-radius: 50%;
								background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/invite-yh.png');
								background-repeat: no-repeat;
								background-size: cover;

								.text {
									font-weight: 400;
									font-size: 26rpx;
									color: #999B9B;
									line-height: 37rpx;
									text-align: center;
									position: relative;
									bottom: -142rpx;
								}
							}

							.invite-item-yes {
								width: 130rpx;
								height: 130rpx;
								border-radius: 50%;
								box-sizing: border-box;
								border: 6rpx solid #FF4E04;

								.inflation-user-avatar {
									width: 118rpx;
									height: 118rpx;
									border-radius: 50%;
									box-sizing: border-box;
									border: 2rpx solid #FFFFFF;
									margin-bottom: 12rpx;
								}

								.text {
									width: 130rpx;
									font-weight: 400;
									font-size: 26rpx;
									color: #999B9B;
									line-height: 37rpx;
									text-align: center;
									position: absolute;
								}
							}
						}
					}
				}

				.invite-btn {
					width: 366rpx;
					height: 128rpx;
					background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/purchase-now5.png');
					background-repeat: no-repeat;
					background-size: cover;
					box-sizing: border-box;
					margin: 0 auto;
					background-color: transparent;
					padding: 0;
				}

				.invite-btn-4 {
					width: 366rpx;
					height: 128rpx;
					background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/purchase-now4.png');
					background-repeat: no-repeat;
					background-size: cover;
					box-sizing: border-box;
					margin: 0 auto;
				}
			}

			.coupon-10 {
				position: absolute;
				left: 148rpx;
				top: 499rpx;
				width: 156rpx;
				height: 184rpx;
				background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/hb.png');
				background-repeat: no-repeat;
				background-size: cover;
				padding-top: 19rpx;
				box-sizing: border-box;
				text-align: center;
				margin: 0 auto;


				&.coupon-10-np {
					animation: scale-up-center2 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
				}

				&.coupon-10-np3 {
					transform: scale(0);
				}

				&.coupon-10-ani {
					animation: scale-up-center-show 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
					animation-delay: .5s;
				}

				&.coupon-10-np4 {
					animation: scale-up-center-hite 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
				}

				.yhq {
					font-size: 20rpx;
				}

				.money {
					font-weight: 900;
					font-size: 58rpx;
					color: #671207;
					margin-bottom: 35rpx;
				}
			}

			.invite-btn-7 {
				position: absolute;
				left: 50%;
				top: 986rpx;
				width: 366rpx;
				height: 128rpx;
				background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/purchase-now6.png');
				background-repeat: no-repeat;
				background-size: cover;
				box-sizing: border-box;
				margin-left: calc(-366rpx / 2);
				font-weight: 900;
				font-size: 44rpx;
				color: #FFFFFF;
				line-height: 110rpx;
				text-align: center;
			}

			.invite-btn-6 {
				position: absolute;
				left: 50%;
				top: 986rpx;
				width: 0;
				height: 0;
				opacity: 0;
				background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/purchase-now6.png');
				background-repeat: no-repeat;
				background-size: cover;
				box-sizing: border-box;
				margin-left: calc(-366rpx / 2);
				font-weight: 900;
				font-size: 44rpx;
				color: #FFFFFF;
				line-height: 110rpx;
				text-align: center;

				&.invite-btn-6-an {
					width: 366rpx;
					height: 128rpx;
					opacity: 1;

					text {
						display: inline-block;
						animation: donghua 1.5s ease-in-out infinite;
						animation-delay: calc(.1s * var(--i));
					}
				}
			}

			.invite-btn-9 {
				width: 600rpx;
				height: 600rpx;
				opacity: 0;
				background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/free-purchase/animation-1.png');
				background-repeat: no-repeat;
				background-size: cover;
				position: absolute;
				left: 50%;
				top: 450rpx;
				transform: translateX(-50%) scale(0.1);
				animation: donghua2 1s ease-in-out 2;
			}
		}
	}

	@keyframes scale-up-center {
		0% {
			opacity: 1;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(0);
			display: none;
		}
	}

	@keyframes scale-up-center-show {
		0% {
			transform: scale(0);
			left: 50%;
			margin-left: calc(-156rpx / 2);
			top: calc(184rpx * 0.8 + 499rpx);
		}

		100% {
			transform: scale(1.8);
			left: 50%;
			margin-left: calc(-156rpx / 2);
			top: calc(184rpx * 0.8 + 499rpx);
		}
	}

	@keyframes scale-up-center-hite {
		0% {
			transform: scale(1.8);
			left: 50%;
			margin-left: calc(-156rpx / 2);
			top: calc(184rpx * 0.8 + 499rpx);
		}

		100% {
			transform: scale(0);
			left: 50%;
			margin-left: calc(-156rpx / 2);
			top: calc(184rpx * 0.8 + 499rpx);
		}
	}


	@keyframes scale-up-center2 {
		0% {
			transform: scale(1);
			margin-left: 0;
			left: 148rpx;
			top: 499rpx;
		}

		100% {
			transform: scale(1.8);
			left: 50%;
			margin-left: calc(-156rpx / 2);
			top: calc(184rpx * 0.8 + 499rpx);
		}
	}

	@keyframes donghua {
		0% {
			transform: translateY(0px);
		}

		20% {
			transform: translateY(-10rpx);
		}

		40%,
		100% {
			transform: translateY(0px);
		}
	}

	@keyframes donghua2 {
		0% {
			opacity: 1;
			transform: translateX(-50%) scale(0.1);
		}

		100% {
			opacity: 0;
			transform: translateX(-50%) scale(10);
		}
	}
</style>